<template>
	<view class="attorneyCheck">
		<navbar></navbar>
		<textNavbar :myprops="xiu"></textNavbar>
		<view class="attorneyCheck-container">
			<van-cell-group>
			  <van-field
					:value="formData.name"
					required
					input-align="right"
					label="姓名"
			    placeholder="请输入姓名"
			    @change="content"
			  />
				<view class="file-picker-wrapper">
					<view>
						<uni-file-picker v-model="formData.fileList1" limit="1" file-mediatype="image" :imageStyles="imageStyles" @select="sele">
							<view class="upload-view">
								<image class="pickerimg1" src="../../../static/拍摄@1x.png" mode=""></image>
								<text class="picker-myimg">本人头像</text>
								<text class="picker-suggest">建议200×200像素</text>
							</view>
						</uni-file-picker>
					</view>
					<view>
						<uni-file-picker @delete="dele" v-model="fileList2" limit="2" file-mediatype="image" :imageStyles="imageStyles" @select="sele1">
							<view class="upload-view1">
								<image class="pickerimg1" src="../../../static/拍摄@1x.png" mode=""></image>
								<text class="picker-myimg">执业证</text>
								<text class="picker-suggest">信息完整请勿涂抹</text>
							</view>
						</uni-file-picker>
					</view>
				</view>
				<van-field
					:value="formData.number"
					required
					input-align="right"
					label="执业证号"
				  placeholder="请输入执业证号"
				  @change="content1"
				/>
				<van-field
					required
					:value="formData.lawoffice"
					input-align="right"
					label="执业律所"
				  placeholder="律师事务所名称"
				  @change="content2"
				/>
				<view @click="open1">
					<van-field
						required
						is-link
						readonly
						clickable
						input-align="right"
					  :value="formData.cascaderValue"
						label="律所所在地区"
					  placeholder="请选择"
					/>
				</view>
				<van-field
					:value="formData.DetailedArea"
				  placeholder="详细地址便于后续客户约见服务使用"
				  @change="content3"
				/>
			</van-cell-group>
			<view class="zhuanye">
				<van-cell-group>
					<view @click="open2">
						<van-field
							required
							is-link
							readonly
							clickable
							input-align="right"
						  :value="formData.domain"
							label="专业领域"
						  placeholder="请选择"
						/>
					</view>
				</van-cell-group>
			</view>
			<view @click="Open4">
				<van-field
				  :value="formData.birthDate"
				  label="从业时间"
					required
					readonly
					is-link
				  placeholder="请选择"
				  input-align="right"
				/>
			</view>
			<van-cell-group>
				<van-field
					required
					label="手机号"
					:value="formData.phone"
					placeholder="请输入手机号"
					input-align="right"
					@change="content4"
					use-button-slot>
					<van-button round slot="button" size="small" type="info" custom-style="font-size: 24rpx; background: #036faf;">
						发送验证码
					</van-button>
				</van-field>
				<van-field
					required
					input-align="right"
					label="验证码"
				  placeholder="验证码"
				  @change="content5"
				/>
			</van-cell-group>
			<view class="xieyi">
				<van-checkbox :value="checked" @change="onChanges" label-disabled>
					<view class="xieyi-view">
						我已阅读并同意<text>律师服务协议</text>
					</view>
				</van-checkbox>
			</view>
			<button @click="toHandler" :disabled="isButtonDisabled"  class="attorneyCheck-container-btn">{{this.text}}</button>
		</view>
	</view>
	<van-popup :show="show1" round position="bottom">
		<van-area :area-list="areaList" title="律所所在地区" @cancel="Close2" @confirm="Finish2" />
	</van-popup>
	<van-popup
	  :show="show2"
	  position="bottom"
		closeable
		round
	  custom-style="height: 30%; background: #EDEDED;"
	  @close="CloseHandler">
		<view class="popup-view">
			<text>擅长专业领域, 最多可选择6个</text>
			<view class="popup-check">
				<uni-data-checkbox  mode="tag" max="6" multiple v-model="checkbox3" :localdata="hobby" @change="changehandler"></uni-data-checkbox>
			</view>
		</view>
	</van-popup>
	<tui-datetime :type="2" :startYear="2015" :endYear="2024" ref="dateTime" @confirm="change4"></tui-datetime>
	<van-toast id="van-toast" />
</template>

<script>
	import tuiDatetime from "@/components/thorui/tui-datetime/tui-datetime.vue"
	import tuiUpload from "@/components/thorui/tui-upload/tui-upload"
	import tuiButton from "@/components/thorui/tui-button/tui-button.vue"
	import { areaList } from '@vant/area-data';
	import { serverURL, token } from "../../../services/httpService";
	import Toast from '@vant/weapp/dist/toast/toast';
  import { getUser, editlawyerDetail, getlawyerDetail } from "../../../utils/utils"
	import { timestampToDate } from "../../../services/tool";
	export default {
		components:{
				tuiUpload, tuiButton, tuiDatetime
		},
		data() {
			return {
				checkbox3: [], // 专业领域选中数据
				hobby: [], // 专业领域初始数据
				imageStyles: { // 文件上传样式
					width: 180,
					height: 117,
				},
				show1: false, // 律所所在地区弹出层
				areaList, // 律所地区列表数据
				show2: false, // 专业领域弹出层
				fileList2: [], // 执业证文件上传数据
				checked: true, // 协议是否勾选
				isButtonDisabled: false, // 添加一个新的数据属性来控制按钮的禁用状态
				text: '确认入驻',
				ids: '', // id
				status: '', // 返回代码
				xiu: '我是律师', // 是否为修改
				list: {},
				// 表单数据
				formData: {
					name: '', // 姓名
					number: '', // 执业证号
					lawoffice: '', // 执业律所
					DetailedArea: "", // 详细地址
					phone: '', // 手机号
					yanz: '', // 验证码
					birthDate: '', // 从业时间
					province: '', // 省
					city: '', // 市
					area: '', // 区
					cascaderValue: '', // 律所地区选中数据
					domain: '', // 专业领域数据
					fileList1: '', // 头像文件上传数据
				},
			};
		},
		methods: {
			// 判断是否为空
			checkFormData (formData) {
				for (let key in formData) {
					// 如果有任一属性值为空字符串，则返回false，表示不满足条件
					if (!formData[key]) {
							return false;
					}
				}
			return true;
			},
			// 头像上传逻辑
			sele (event) {
				let token = uni.getStorageSync('token');
				// console.log('头像event'，event);
				const upload = event.tempFiles[0]
				uni.uploadFile({
					url: `${serverURL}/api/upload_image`,
					name: 'file', // 对应服务器接收文件的参数名
					header: {
						Authorizationpas: `Bearer ${token}`,
					},
					filePath: upload.path,
					success: (res) => {
						let dataObj = JSON.parse(res.data)
						let url = dataObj.data.url;
						this.formData.fileList1 = url
						console.log(this.formData.fileList1);
					},
				})
			},
			// 执业证上传逻辑
			sele1 (event) {
				// console.log(event.tempFiles);
				let token = uni.getStorageSync('token');
				const upload = event.tempFiles[0]
				if(event.tempFiles.length >= 1) {
					this.imageStyles.width = 120
				} else {
					this.imageStyles.width = 180
				}
				uni.uploadFile({
					url: `${serverURL}/api/upload_image`,
					name: 'file', // 对应服务器接收文件的参数名
					header: {
						Authorizationpas: `Bearer ${token}`,
					},
					filePath: upload.path,
					success: (res) => {
						let dataObj = JSON.parse(res.data)
						// console.log(res.data);
						let url = dataObj.data.url;
						this.fileList2.push(url)
						// console.log(this.fileList2);
					},
				})
			},
			// 执业证删除的函数
			dele (event) {
				console.log(event);
				// 确保event.index存在并且在fileList2的有效范围内
				  if (event.index !== undefined && event.index >= 0 && event.index < this.fileList2.length) {
				    // 删除指定索引的图片
				    this.fileList2.splice(event.index, 1);
				    // 如果删除后fileList2为空，重置图片宽度
				    if (this.fileList2.length === 0) {
				      this.imageStyles.width = 180;
				    }
				  } 
					// console.log(this.fileList2);
			},
			// 律师所在地区打开逻辑
			open1 () {
				this.show1 = true;
			},
			// 律师所在地区关闭逻辑
			Close2 () {
				this.show1 = false
			},
			// 律师所在地区确定逻辑
			Finish2(e) {
				// console.log(e.detail);
				const detail = e.detail.values
				const names = detail.map(item => item.name).join(',')
				this.formData.cascaderValue = names
				this.formData.province = detail[0].name
				this.formData.city = detail[1].name
				this.formData.area = detail[2].name
				// console.log(this.formData.province, this.formData.city, this.formData.area)
				this.show1 = false
			},
			// 专业领域打开逻辑
			open2 () {
				this.show2 = true
			}, 
			// 专业领域取消选择的回调
			CloseHandler () {
				this.show2 = false;
			},
			// 选中专业逻辑
			changehandler (e) {
				console.log(e.detail.data);
				let arr = e.detail.data
				console.log(e.detail.data);
				let list = arr.map(item => item.text).join(',');
				this.formData.domain = list
				console.log(this.checkbox3);
				// console.log(this.formData.domain);
			},
			// 服务协议的正反选
			onChanges(event) {
				this.checked = event.detail
				// console.log(event.detail);
			},
			// 确认入驻的逻辑
			toHandler () {
				// 判断是修改律师信息还是律师入驻
				if (this.xiu == '律师修改') {
					let a = {
						id: this.ids,
						name: this.formData.name,
						image: this.formData.fileList1,
						card_img: this.fileList2,
						card_number: this.formData.number,
						cardTime: this.formData.birthDate,
						lawfirms: this.formData.lawoffice,
						province: this.formData.province,
						city: this.formData.city,
						area: this.formData.area,
						address: this.formData.DetailedArea,
						phone: this.formData.phone,
						type_id: this.formData.domain,
					}
					editlawyerDetail (a, (e) => {
						// console.log('律师修改', e)
						Toast(e.msg)
						if (e.status == 200) {
							setTimeout(() => {
								uni.redirectTo({
									url: "/pages/Attorney side/lawyerInfo/lawyerInfo"
								})
							},2000)
						}
					})
				} else {
					if(this.checkFormData(this.formData)) {
						const a = this.formData.fileList1
						if (!this.status) {
							// 提交认证律师
							uni.request({
								url: `${serverURL}/api/check`,
								method: "POST",
								header: {
									Authorizationpas: `Bearer ${token}`,
								},
								data: {
									name: this.formData.name,
									image: a,
									card_img: this.fileList2,
									card_number: this.formData.number,
									cardTime: this.formData.birthDate,
									lawfirms: this.formData.lawoffice,
									province: this.formData.province,
									city: this.formData.city,
									area: this.formData.area,
									address: this.formData.DetailedArea,
									phone: this.formData.phone,
									type_id: this.formData.domain,
								},
								success: (res) => {
									if(res.data.status == 200) {
										Toast.success(res.data.msg);
										// this.isButtonDisabled = true; // 成功后禁用按钮
										this.$nextTick(() => {
											this.formData.name = '',
											this.formData.fileList1 = '',
											this.fileList2 = [],
											this.formData.number = '',
											this.formData.lawoffice = '',
											this.formData.birthDate = '',
											this.formData.province = '',
											this.formData.city = '',
											this.formData.area = '',
											this.formData.DetailedArea = '',
											this.formData.phone = '',
											this.formData.domain = ''
										})
										setTimeout(() => {
											uni.navigateTo({
												url:"/pages/Attorney side/myLawyerTwo/myLawyerTwo"
											});
										},5000)
									} else {
										this.status = res.data.status
									}
								}
							})
						} else {
							// 获取认证状态
							uni.request({
								url:`${serverURL}/api/getNowCheck`,
								method: "POST",
								header: {
									Authorizationpas: `Bearer ${token}`,
								},
								success: (event) => {
									 Toast.success(event.data.msg);
									 console.log('失败里面认证状态',event.data.data.data);
									 this.ids = event.data.data.data.id
									 this.status = '400'
								}
							})
							uni.request({
								url: `${serverURL}/api/putCheck`,
								method: "POST",
								header: {
									Authorizationpas: `Bearer ${token}`,
								},
								data: {
									id: this.ids,
									name: this.formData.name,
									image: a,
									card_img: this.fileList2,
									card_number: this.formData.number,
									cardTime: this.formData.birthDate,
									lawfirms: this.formData.lawoffice,
									province: this.formData.province,
									city: this.formData.city,
									area: this.formData.area,
									address: this.formData.DetailedArea,
									phone: this.formData.phone,
									type_id: this.formData.domain,
								},
								success: (event) => {
									Toast(event.data.msg)
									setTimeout(() => {
										uni.navigateTo({
											url:"/pages/Attorney side/myLawyerTwo/myLawyerTwo"
										});
									},3000)
								}
							})
						}
					} else {
						Toast('有数据为空请输入')
					}
				}

			},
			// 打开出生日期逻辑
			Open4 () {
				this.$refs.dateTime.show();
			},
			// 日期选择器确定按钮逻辑
			change4 (e) {
				console.log(e);
				this.formData.birthDate = e.result;
			},
			// 姓名输入框
			content (e) {
				this.formData.name =  e.detail
			},
			// 执业证号输入框
			content1 (e) {
				this.formData.number =  e.detail
			},
			// 执业律师输入框
			content2 (e) {
				this.formData.lawoffice =  e.detail
			},
			// 详细地址输入框
			content3 (e) {
				this.formData.DetailedArea =  e.detail
			},
			// 手机号输入框
			content4 (e) {
				this.formData.phone =  e.detail
			},
			// 验证码输入框
			content5 (e) {
				this.formData.yanz =  e.detail
			},
			// 律师修改选中数据
			getMatchedIds(typeIdsStr) {
				const typeIds = typeIdsStr.split(','); // 将type_id字符串分割成数组
				const matchedIds = [];
				// console.log('hobby',this.hobby);
				for (const typeId of typeIds) {
					const matchedItem = this.hobby.find(item => item.text == typeId);
					// console.log(matchedItem);
					if (matchedItem) {
						matchedIds.push(matchedItem.value);
						// console.log(matchedIds);
					} 
				}
				return matchedIds;
			},
		},
		onLoad(option) {
			const that = this
			this.xiu = option.name
			let token = uni.getStorageSync('token');
			// 获取擅长类型
			uni.request({
				url: `${serverURL}/api/getType`,
				method: "POST",
				header: {
					Authorizationpas: `Bearer ${token}`,
				},
				success: (res) => {
					// console.log('成功',res.data.data.data);
					const list = res.data.data.data;
					const modifiedData = list.map(item => {
					  const newItem = {}; 
					  newItem.value = item.id; 
					  newItem.text = item.name; 
						newItem.add_time = item.add_time
						newItem.is_show = item.is_show
					  return newItem;
					});
					this.hobby = modifiedData
				}
			})
			
			// 是否是律师修改，是就执行
			if (this.xiu == '律师修改') {
				getlawyerDetail((res) => {
					let a = {...res.data.lawyer}
					console.log('律师信息',res.data.lawyer);
					const datatime = timestampToDate(a.add_time)
					let c = a.card_img
					// 专业领域选中数据
					let matchedIds = that.getMatchedIds(a.type_id);
					that.formData.name = a.name
					that.formData.number = a.card
					that.formData.lawoffice = a.lawfirms
					that.formData.DetailedArea = a.address
					that.formData.phone = a.phone
					that.formData.birthDate = datatime
					that.formData.cascaderValue = a.province + ',' + a.city + ',' + a.area
					that.formData.province = a.province
					that.formData.city = a.city
					that.formData.area = a.area
					that.formData.fileList1 = a.image
					that.formData.domain = a.type_id
					that.fileList2 = c.split(','),
					that.checkbox3 = matchedIds
					that.ids = a.id
					// console.log(that.checkbox3);
					// console.log(that.fileList2);
				})
			}
			getUser((e) => {
				// console.log(e);
			})
		}
	}
</script>

<style lang="scss" scoped>
	.attorneyCheck {
		width: 100vw;
		height: 100vh;
		background-color: #EDEDED;
	}
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		height: 90rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #EDEDED;
	}
	
	.status_bar > uni-icons {
		position: relative;
		left: -300rpx;
		top: 0;
	}
	.status_bar > text {
		display: block;
		margin-left: -40rpx;
	}
	.attorneyCheck-container {
		margin: 0 auto;
	}
	.a1 {
		margin-top: 16rpx;
		text-align: right;
		font-size: 28rpx;
	}
	
	.upload-view {
		width: 340rpx;
		height: 200rpx;
		border: 1px dashed #999999;
		border-radius: 8px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 0 5px 0 9px;
		background: #F7F7F7
	}
	.upload-view1 {
		width: 340rpx;
		height: 200rpx;
		border: 1px dashed #999999;
		border-radius: 8px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 0 5px 0 9px;
		background: #F7F7F7
	}
	.pickerimg1 {
		width: 40rpx;
		height: 40rpx;
	}
	.picker-myimg {
		display: block;
		font-size: 24rpx;
		margin: 10rpx 0 2rpx 0;
	}
	
	.picker-suggest {
		display: block;
		width: 200rpx;
		height: 34rpx;
		font-size: 24rpx;
		color: #9D9D9D;
	}
	.form-shou {
		width: 100%;
		display: flex;
		justify-content: space-between;
		text-align: right;
		margin-top: 20rpx;
	}
	.form-shou > button {
		width: 170rpx;
		height: 42rpx;
		font-size: 22rpx;
		line-height: 42rpx;
		color: #FFFFFF;
		background: #036FAF;
		border-radius: 21rpx;
	}
	
	.attorneyCheck-container-btn {
		width: 630rpx;
		height: 88rpx;
		border-radius: 62rpx;
		background: #036FAF;
		color: #FFFFFF;
		font-size: 32rpx;
		margin-top: 64rpx;
	}
	
	.zhuanye {
		margin: 12rpx 0 12rpx 0;
	}
	
	.xieyi {
		font-size: 26rpx;
		margin: 28rpx 0 0 28rpx;
	}
	.xieyi-view > text {
		color: #036FAF;
	}
	
	.file-picker-wrapper {
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: white;
		flex-wrap: nowrap;
	}
	::v-deep .uni-file-picker__container {
		flex-wrap: nowrap !important;
	}
	::v-deep.file-image {
		width: 100px !important;
	}
	
	.popup-view {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.popup-view > text {
		display: block;
		margin-top: 60rpx;
		font-size: 26rpx;
	}
	.popup-check {
		width: 90vw;
		height: 29vh;
		margin-top: 20rpx;
	}
	
	::v-deep.checklist-group {
		justify-content: center !important;
	}
	::v-deep.checklist-box.is--tag {
		margin-right: 10rpx !important;
		padding: 10rpx 12rpx !important;
		border-radius: 24rpx !important;
	}
	
	::v-deep.van-cell__value {
		color: black;
	}
</style>
